<template>
  <el-card
    class="book-card"
    shadow="hover"
    @click="handleClick"
  @mouseenter="onEnter"
  @mouseleave="showHover = false"
  >
    <div class="cover-wrapper">
      <el-image
        v-if="book.cover_url"
        :src="book.cover_url"
        fit="cover"
        class="cover"
        lazy
      >
        <template #error>
          <div class="cover placeholder">无封面</div>
        </template>
      </el-image>
      <div v-else class="cover placeholder">无封面</div>
      <div class="meta-badge" v-if="book.dynasty">{{ book.dynasty }}</div>
    </div>
    <div class="info">
      <h3 class="title" :title="book.title">{{ book.title }}</h3>
      <p class="author" v-if="book.author">{{ book.author }}</p>
      <p class="chapters" v-if="book.total_chapters">共 {{ book.total_chapters }} 章</p>
    </div>
    <transition name="fade">
      <div class="hover-overlay" v-if="showHover">
        <p class="desc" v-if="book.description">{{ truncatedDesc }}</p>
        <el-tag size="small" type="info" effect="plain">进入阅读</el-tag>
      </div>
    </transition>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useBooksStore } from '@/store/books'
const props = defineProps({
  book: { type: Object, required: true }
})
const emit = defineEmits(['select'])

const showHover = ref(false)
const booksStore = useBooksStore()
const truncatedDesc = computed(() => {
  const d = props.book.description || ''
  return d.length > 60 ? d.slice(0, 60) + '...' : d
})

function handleClick() {
  emit('select', props.book)
}

let prefetchTimer = null
function onEnter() {
  showHover.value = true
  // 延迟预取，避免用户快速划过造成过多请求
  if (prefetchTimer) clearTimeout(prefetchTimer)
  prefetchTimer = setTimeout(async () => {
    booksStore.ensureBookDetail(props.book.id)
  }, 300)
}
</script>

<style scoped>
.book-card {
  position: relative;
  cursor: pointer;
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.book-card:hover { transform: translateY(-4px); }
.cover-wrapper { position: relative; width: 100%; padding-top: 140%; }
.cover { position: absolute; left:0; top:0; width:100%; height:100%; border-radius: 6px; }
.cover.placeholder { background: #d8dfe6; color:#666; display:flex; align-items:center; justify-content:center; font-size: 14px; }
.meta-badge { position:absolute; left:6px; top:6px; background: rgba(0,0,0,.55); color:#fff; padding:2px 6px; font-size:12px; border-radius:4px; }
.info { padding: 10px 4px 14px; flex:1; display:flex; flex-direction:column; }
.title { font-size:15px; margin:0 0 4px; font-weight:600; color:#2c3e50; line-height:1.3; }
.author { margin:0 0 4px; font-size:12px; color:#607080; }
.chapters { margin:0; font-size:12px; color:#909399; }
.hover-overlay { position:absolute; inset:0; background:rgba(0,0,0,.65); color:#fff; padding:12px; display:flex; flex-direction:column; justify-content:flex-end; }
.hover-overlay .desc { font-size:12px; margin:0 0 6px; line-height:1.4; }
.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
.fade-enter-from, .fade-leave-to { opacity:0; }
</style>
